<script setup lang="ts">
  import CodeMirrorEditor from '@/components/CodeEditor/src/codemirror/CodeMirror.vue';
  import { MODE } from '@/components/CodeEditor';
  import { ref } from 'vue';

  const v = ref<string>('{}');

  const schmema = {
    type: 'object',
    $schema: 'http://json-schema.org/draft-07/schema#',
    required: ['nameServer', 'producerGroup', 'topic'],
    properties: {
      nameServer: {
        type: 'string',
      },
      producerGroup: {
        type: 'string',
      },
      topic: {
        type: 'string',
      },
      accessKey: {
        type: ['string', 'null'],
      },
      secretKey: {
        type: ['string', 'null'],
      },
      sendMsgTimeout: {
        type: ['integer', 'null'],
      },
      maxMessageSize: {
        type: ['integer', 'null'],
      },
      retryTimesWhenSendFailed: {
        type: ['integer', 'null'],
      },
      retryTimesWhenSendAsyncFailed: {
        type: ['integer', 'null'],
      },
    },
  };

  function handleValueChange(i) {
    console.log(i);
  }
</script>

<template>
  <CodeMirrorEditor
    :value="v"
    @change="handleValueChange"
    :mode="MODE.JSON"
    :readonly="false"
    :bordered="false"
    :schmema="schmema"
  />
</template>

<style scoped lang="less"></style>
